@import "./reset.css";
@import "./common.scss";
.banner {
    background-image: url(../img/bg2.png);
    .swiper-pagination {
        left: 20.8vw;
        span {
            width: 1.07vw;
            height: 1.07vw;
        }
    }
    .size {
        width: 100%;
        height: 100%;
        .bg1 {
            background-image: url(../img/bg.png);
            background-size: cover;
            background-repeat: no-repeat;
        }
        .bg2 {
            background-image: url(../img/n1.png);
            background-size: cover;
            background-repeat: no-repeat;
        }
        .bg3 {
            background-image: url(../img/bg2.png);
            background-size: cover;
            background-repeat: no-repeat;
        }
        .bg4 {
            background-image: url(../img/f1.png);
            background-size: cover;
            background-repeat: no-repeat;
        }
    }
    .content {
        // height: 35vw;
        position: absolute;
        width: 60vw;
        height: 31.4vw;
        left: 20.8vw;
        top: -0;
        z-index: 999;
    }
}

main {
    font-size: 0;
    .bg {
        margin-top: -2vw;
        width: 82.47vw;
        margin: 0 auto;
        overflow: hidden;
        img {
            width: 100%;
        }
    }
    .about {
        .big {
            p {
                margin: 3vw 0;
                font-size: 0.8vw;
                color: #525252;
                opacity: 0.9;
                text-indent: 1.6vw;
                line-height: 2vw;
            }
            .imgBox {
                font-size: 0px;
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;
                .little {
                    width: 21.47vw;
                    position: relative;
                    text-align: center;
                    .img {
                        width: 100%;
                        height: 14vw;
                        overflow: hidden;
                        &:hover .content {
                            transform: translateY(-14vw);
                            transition: 1s;
                        }
                        img {
                            width: 100%;
                        }
                        .content {
                            width: 100%;
                            height: 14vw;
                            background: rgba(0, 0, 0, .67);
                            color: #fff;
                            display: flex;
                            align-items: center;
                            flex-direction: column;
                            flex-wrap: wrap;
                            justify-content: center;
                            h2 {
                                font-weight: normal;
                                font-size: 2vw;
                                padding-bottom: .5vw;
                            }
                            span {
                                font-size: 0.8vw;
                                line-height: 1.2vw;
                            }
                        }
                    }
                    .showdow {
                        bottom: 7vw;
                    }
                    .btn {
                        display: block;
                        width: 6.8vw;
                        height: 2.87vw;
                        background-image: linear-gradient(0deg, #00497d 0%, #3e8fc9 100%), linear-gradient( #000000, #000000);
                        border-radius: 0.33vw;
                        font-size: 1.07vw;
                        line-height: 1.2vw;
                        color: #ffffff;
                        text-align: center;
                        padding-top: 0.93vw;
                        margin: 1.4vw auto 1.6vw;
                    }
                }
            }
        }
    }
}